<template>
	<view class="blind flex_c">

		<view class="people_list">
			<!-- <scroll-view scroll-x="true">
				<view class="people_content flex_center">
					<view class="item flex_c" v-for="(item,index) in people_list" :key="index"
						@click="onSelectPeople(item.userId)">
						<view class="avatar flex_r_around">
							<image class="user_avatar" :src="item.avatarUrl" mode="aspectFill"></image>
							<image :src="$util.prefix('blind/blind_people_select.png')" class="select_image"
								v-show="to_uid == item.userId"></image>
						</view>
						<text class="hidden" :id="to_uid == item.userId ? 'select' : ''">{{ item.userName }}</text>
					</view>
				</view>
			</scroll-view> -->
		</view>

		<view class="notice">
			<u-notice-bar color="#FFF" bgColor="transparent" :text="notice" direction="column"
				fontSize="24rpx"></u-notice-bar>
		</view>

		<view class="box">
			<view v-for="(item,index) in prizeList" :key="index"
				:class="`item flex_c item${ index+1 } ${shake_index == index ? 'shake' : ''}`" @click="open(index)"
				:id="`${shuffle_card ? 'begin' : ''}`"
				:style="`opacity:${select_opcity ? .4 : 1};${select_opcity ? 'transition-delay: 0s;' : ''}`">
				<view class="block flex_c"
					:style="`background: url(${$util.prefix(show_gift ? 'blind/blind_box_bg.png' : 'blind/blind_box_bg_noselect.png')}) 0 0 no-repeat;`">
					<view class="image">
						<!-- <image :src="$util.prefix('blind/blind_box_gift.png')" :id="show_gift ? 'opcity' : ''"></image> -->
						<image :src="item.img" :id="!show_gift ? 'opcity' : ''"></image>
					</view>

					<view class="item_title flex_r_around" v-show="show_gift">
						<image :src="$util.prefix('blind/blind_gold.png')"></image>
						<text class="hidden">{{ Number(item.gold_price).toFixed(0) }}</text>
					</view>
				</view>

			</view>
		</view>

		<view class="first flex_r_around" v-if="show_first_btn || show_start_btn">
			<view @click="begin(1)" class="flex_r_around"
				:style="`background: url(${$util.prefix('blind/blind_start_1.png')}) 0 0 no-repeat;`">
				<text>{{ singGoldPrice }}金币</text>
			</view>
			<view @click="begin(10)" class="flex_r_around"
				:style="`background: url(${$util.prefix('blind/blind_start_10.png')}) 0 0 no-repeat;`">
				<text>{{ singGoldPrice * 10 }}金币</text>
			</view>
			<view @click="begin(50)" class="flex_r_around"
				:style="`background: url(${$util.prefix('blind/blind_start_50.png')}) 0 0 no-repeat;`">
				<text>{{ singGoldPrice * 50 }}金币</text>
			</view>
		</view>

		<view class="pending" v-if="show_pending_btn">
			<!-- 选一个送出 -->
		</view>

		<!-- <view class="start flex_c" v-if="show_start_btn">
			<view @click="begin(1)" class="flex_r_around"
				:style="`background: url(${$util.prefix('blind/blind_start_1.png')}) 0 0 no-repeat;`">
				<text>20金币</text>
			</view>
		</view> -->

		<view class="gold_box flex_r_between">
			<view class="left flex_center">
				<image :src="$util.prefix('blind/blind_gold.png')"></image>
				<text>我的金币：{{ balance || 0 }}</text>
			</view>
			<view class="right flex_center" @click="$native.toRecharge()">
				<image :src="$util.prefix('blind/blind_to_re.png')"></image>
			</view>
		</view>

		<view @touchmove.stop.prevent="preventHandler">
			<u-popup :closeOnClickOverlay="true" mode="bottom" :show="rich_show" bgColor="transparent"
				:safeAreaInsetBottom="false" @close="rich_show = false">
				<view class="popup flex_c">
					<view class="popup_tab flex_center" :style="`background: url(${$util.prefix(`blind/blind_rich_popup_tab${popup_tab}.png`)}) 0 0 no-repeat;`
						
					">
						<view @click="onShowRich(1)"></view>
						<view @click="onShowRich(2)"></view>
						<view @click="onShowRich(3)"></view>
					</view>
					<view class="popup_content">
						<scroll-view scroll-y="true" v-if="popup_tab == 2">
							<view class="rich_text">
								<view class="text">
									1.蛇年桃花运盲盒是超圈推出的趣味玩法，用户在赠送礼物页面或活动页面为主播赠送幸运盲盒。每个蛇年桃花运盲盒100金币。
								</view>
								<view class="text">
									2.蛇年桃花运盲盒是本旨为娱乐，请理性消费。严禁未成年人参与本活动。蛇年桃花运盲盒抽中的礼物直接送给选中的主播，不到用户背包。严禁任何人利用本多动进行博彩等一切违法活动。
								</view>
								<view class="text">
									3.用户参与趣味活动，送一个盲盒可增加***财富等级。
								</view>
								<view class="text">
									4.参与本活动时，可选择赠送一个，赠送10个，赠送50个。选择赠送多个时，赠送的结果累计显示。
								</view>
								<view class="text">
									5.信用盲盒礼物奖品规格，数量如下：
								</view>
								<view class="table">
									<view class="header flex_center">
										<view class="item flex_r_around">
											<text>礼物</text>
										</view>
										<view class="item flex_r_around">
											<text>礼物价值(金币)</text>
										</view>
										<view class="item flex_r_around" id="no_right">
											<text>奖品数量(个)</text>
										</view>
									</view>
									<view class="table_list flex_center" v-for="(item,index) in prizeList" :key="index"
										:id="index == (prizeList.length-1) ? 'no_bottom' : ''">
										<view class="item flex_center">
											<image :src="item.img" mode="aspectFill"></image>
											<text class="hidden">{{ item.name }}</text>
										</view>
										<view class="item flex_r_around">
											<text>{{ Number(item.gold_price).toFixed(0) }}</text>
										</view>
										<view class="item flex_r_around" id="no_right">
											<text>{{
												index == 1 ? 1458
												: index == 1 ? 1924
												: index == 1 ? 3100
												: index == 1 ? 2700
												: index == 1 ? 700
												: 100
											}}</text>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>

						<scroll-view scroll-y="true" v-if="popup_tab == 1" @scrolltolower="onReach">
							<view class="popup_list">
								<view class="item flex_center" v-for="(item,index) in list" :key="index">
									<view class="left flex_center">
										<view class="avatar">
											<image :src="item.to_avatar" mode="aspectFill"></image>
										</view>
										<view class="text">
											<view class="name hidden">送给 {{ item.to_nickname }}</view>
											<view class="info flex_center">
												<text>赠送约</text>
												<i>{{ item.prize_gold_price }}</i>
												<text>金币的礼物</text>
											</view>
											<view class="time hidden">
												<uni-dateformat :date="item.create_time*1000"
													format="yyyy-MM-dd"></uni-dateformat>
											</view>
										</view>
									</view>
									<view class="right">
										<image :src="item.gift_img" mode="aspectFill"></image>
									</view>
								</view>
								<view class="loading_block" v-if="total > list.length">
									<u-loading-icon mode="semicircle" color="#FFF"></u-loading-icon>
								</view>
							</view>
						</scroll-view>

						<scroll-view scroll-y="true" v-if="popup_tab == 3">
							<view class="rich_text">
								<view class="text">
									1.活动期间，用户应当遵守法律法规及平台规则，如发现用户违规(包括但不限于使用外挂作弊、恶意套现、反向兑换现金、倒买倒卖、洗钱等违背诚实信用或损害其他用户、平台及任何第三方合法权益的行为)，平台有权撤销用户活动参与资格，收回全部权益，必要时追究法律责任，并有权视情况对用户采取限制、封禁帐号、冻结资金以做进一步查证处理
								</view>
								<view class="text">
									2.任何人不得利用本次活动进行博彩或其他违法行为，对于本平台用户，一经发现，本平台将立即取消用户参与资格并收回所得奖励。如行为构成犯罪，将移交司法机关处理。如给平台造成其他损失，同时应当承担赔偿责任
								</view>
								<view class="text">
									3.平台严禁并严厉打击任何以盈利为目的的线下非法交易行为任何人以本平台名义宣称或从事类似活动或恶意发放、转让、回收、奖励、欺诈等造成用户损失的，本平台无需为此承担任何法律责任
								</view>
								<view class="text">
									4.因用户操作不当或用户所在地区网络故障、支付平台网络故障、电信运营商故障、第三方其他平台限制等非平台所能控制的原因导致的用户无法参与活动、或参与失败，平台无需为此承担任何法律责任
								</view>
								<view class="text">
									5.平台可以根据本活动的实际情况，在法律允许的范围内，为保障消费者的权益，对活动规则进行变动或调整，相关变动或调整将公布在活动页面上，并于公布时即时生效
								</view>
								<view class="text">
									6.如对活动规则或其他有任何问题，请联系在线客服咨询
								</view>
								<view class="text">
									7.仅限18岁及以上用户参加，禁止未成年充值、打赏行为
								</view>
								<view class="text">
									8.适度参与活动，合理安排时间避免过度沉迷
								</view>
								<view class="text">
									9.本活动与Apple Inc,无关。
								</view>
							</view>
						</scroll-view>


					</view>
				</view>
			</u-popup>
		</view>

		<view class="rich flex_c">
			<view class="tags_item" @click="onShowRich(1)">
				<image :src="$util.prefix('blind/blind_tags_list.png')"></image>
			</view>
			<view class="tags_item" @click="onShowRich(2)">
				<image :src="$util.prefix('blind/blind_tags_rich.png')"></image>
			</view>
			<view class="tags_item" @click="onShowRich(3)">
				<image :src="$util.prefix('blind/blind_tags_agree.png')"></image>
			</view>
		</view>

		<wLoading ref="loading"></wLoading>

		<view class="loading flex_c" v-if="!loaded">
			<view style="height: 60rpx;"></view>
			<ProgressBar :Width="percent" Type="candy"></ProgressBar>
		</view>

		<!-- 中奖弹窗 -->
		<view @touchmove.stop.prevent="preventHandler">
			<u-popup :show="modal" @close="modal = false" mode="center" bgColor="transparent"
				:safeAreaInsetBottom="false">
				<view class="success flex_c" @click="modal = false">
					<view class="grid">
						<u-grid :border="false" :col="getCol()">
							<u-grid-item v-for="(item,index) in success_list" :key="index">
								<!-- <view class="flex_c"> -->
								<view class="item flex_r_around" :id="success_list.length == 1 ? 'one' : ''">
									<image :src="item.img" mode="widthFix"></image>
									<view class="price flex_r_around">
										<text>×{{ item.num }}</text>
									</view>
								</view>
								<!-- <text class="name">×{{ item.name }}</text> -->
								<!-- </view> -->
							</u-grid-item>
						</u-grid>
					</view>

					<view class="all_price flex_center">
						<text>礼物总价值: {{ all_price }}</text>
						<image src="/static/recharge/gold_coins.png"></image>
					</view>

					<view class="success_again">
						<view @click="begin(1)" class="flex_r_around" v-if="num == 1"
							:style="`background: url(${$util.prefix('blind/blind_start_1.png')}) 0 0 no-repeat;`">
							<text>{{ singGoldPrice }}金币</text>
						</view>
						<view @click="begin(10)" class="flex_r_around" v-if="num == 10"
							:style="`background: url(${$util.prefix('blind/blind_start_10.png')}) 0 0 no-repeat;`">
							<text>{{ singGoldPrice * 10 }}金币</text>
						</view>
						<view @click="begin(50)" class="flex_r_around" v-if="num == 50"
							:style="`background: url(${$util.prefix('blind/blind_start_50.png')}) 0 0 no-repeat;`">
							<text>{{ singGoldPrice * 50 }}金币</text>
						</view>
					</view>

					<view class="close_text">
						点击任意区域关闭
					</view>

				</view>
			</u-popup>
		</view>

		<view @touchmove.stop.prevent="preventHandler">
			<u-popup :show="first_modal" @close="first_modal = false" mode="center" bgColor="transparent"
				:safeAreaInsetBottom="false" :closeOnClickOverlay="false">
				<view class="first_popup flex_c">
					<view class="first_title">玩法公告</view>
					<view class="first_content">
						<scroll-view scroll-y="true">
							<view>本功能玩法不向未成年人开放，未成年人用户请勿参与。</view>
							<view>1.本平台玩法均为为提升用户体验设计，任何用户和主播均不得利用平台玩法实施任何违法犯罪的行为或用于任何违法犯罪的用户</view>
							<view>2.本平台玩法中获得的礼物和奖励仅限于在平台内消费，禁止主播、主播所在公会、用户及其他第三方主体进行任何形式的背包礼物交易;</view>
							<view>3.健康游戏，理性消费，如存在上述行为，平台将严格按照平台规则采取相关管理措施:</view>
						</scroll-view>
					</view>
					<view class="first_check flex_center" @click="first_check = !first_check">
						<view class="icon">
							<u-icon :name="first_check ? 'checkmark-circle-fill' : 'checkmark-circle'"
								:color="first_check ? '#FE2F91' : '#666'" size="32rpx"></u-icon>
						</view>
						<view class="first_text flex_r_around">
							<text>我已阅读并同意</text>
						</view>
						<view class="first_text flex_r_around"
							@click="$util.toUrl('/pages/agreement/agreementByMy?type=game_conventions')">
							<i>《玩法须知和公约》</i>
						</view>
					</view>
					<view class="first_btn flex_r_between">
						<view @click="$native.backAction()" class="first_btn_item flex_r_around"
							:style="`background: url(${$util.prefix('blind/blind_btn_bg.png')}) 0 0 no-repeat;`">
							<text>不同意</text>
						</view>
						<view @click="onAgree" class="first_btn_item flex_r_around"
							:style="`background: url(${$util.prefix('blind/blind_btn_bg.png')}) 0 0 no-repeat;`">
							<view class="flex_c">
								<text>同意并进入</text>
								<i>今日不再显示</i>
							</view>
						</view>
					</view>
				</view>
			</u-popup>
		</view>

	</view>
</template>

<script>
	import wLoading from "@/components/w-loading/w-loading.vue";
	import HevuLoading from '@/components/hevu-loading/hevu-loading.vue';
	import ProgressBar from '@/components/Progress-Bar/Progress-Bar.vue';
	export default {
		components: {
			wLoading,
			HevuLoading,
			ProgressBar
		},
		watch: {
			count: function(val, old) {
				if (val === this.load_image.length) { // 图片全部加载完成后跳转页面
					this.loaded = true;
				}
			},
		},
		data() {
			return {

				notice: [],
				prizeList: [],


				load_image: [
					'https://qiniu-cdn.maeiyun.com//h5static/blind/blind_box_gift.png',
					'https://qiniu-cdn.maeiyun.com//h5static/blind/blind_box_bg.png',
					'https://qiniu-cdn.maeiyun.com//h5static/blind/blind_bg.png',
					'https://qiniu-cdn.maeiyun.com//h5static/blind/blind_box_bg_noselect.png',
					'https://qiniu-cdn.maeiyun.com//h5static/blind/blind_people_select.png',
					'https://qiniu-cdn.maeiyun.com//h5static/blind/blind_start_1.png',
					'https://qiniu-cdn.maeiyun.com//h5static/blind/blind_start_10.png',
					'https://qiniu-cdn.maeiyun.com//h5static/blind/blind_start_50.png',
					'https://qiniu-cdn.maeiyun.com//h5static/blind/blind_gold.png',
					'https://qiniu-cdn.maeiyun.com//h5static/blind/blind_to_re.png',
					'https://qiniu-cdn.maeiyun.com//h5static/blind/blind_tags_rich.png',
					'https://qiniu-cdn.maeiyun.com//h5static/blind/blind_tags_list.png',
					'https://qiniu-cdn.maeiyun.com//h5static/blind/blind_tags_agree.png',
					'https://qiniu-cdn.maeiyun.com//h5static/blind/blind_rich_popup_tab1.png',
					'https://qiniu-cdn.maeiyun.com//h5static/blind/blind_rich_popup_tab2.png',
					'https://qiniu-cdn.maeiyun.com//h5static/blind/blind_rich_popup_tab3.png',
					'https://qiniu-cdn.maeiyun.com//h5static/blind/blind_btn_bg.png',
					'https://qiniu-cdn.maeiyun.com//h5static/blind/blind_success_box_bg.png'
				],
				// 加载完成数量
				count: 0,
				// 预加载状态
				loaded: false,
				// 进度
				percent: 0,

				// 自动播放

				index: 1, // 中奖下标

				show_gift: true,

				shuffle_card: false,

				show_start_btn: false,
				show_first_btn: true,
				show_pending_btn: false,

				select_opcity: false,

				shake_index: -1,


				// 接口所需参数
				num: 1,
				rid: '0',
				to_uid: 0,
				gid: 913,

				flag: false,

				get_num: 0,

				// 弹窗
				// show: false,
				// 中奖结果
				// show_get_list: [],

				to_nickname: '',
				to_gift_name: '',
				to_gift_leval: '',

				// 规则弹窗
				rich_show: false,

				show_pay: false,

				toast: false,
				people_list: [],

				// 单次价格
				singGoldPrice: 0,

				balance: 0,

				popup_tab: 1,

				list: [],
				total: 0,
				page: 1,

				success_list: [],
				all_price: 0,
				modal: false,

				first_modal: false,
				first_check: false,

			}
		},

		methods: {

			preventHandler() {
				return;
			},

			// 获取金币余额
			getBlance() {
				this.$post('/jinbi/getBalance', {}, false).then(res => {
					this.balance = Number(res.data.balance).toFixed(0);
				});
			},

			onShowRich(type) {
				this.popup_tab = type;
				if (type == 1) {
					// 记录
					this.page = 1;
					this.list = [];
					this.getList();
				}
				if (type == 2) {
					// 文本
				}
				if (type == 3) {
					// 文本
				}
				this.rich_show = true;
			},

			getList() {
				this.$get('/active.supGiftPrizeV2/getMyPrizeLog', {
					page: this.page
				}).then(res => {
					this.total = res.data.total;
					this.list.push(...res.data.data);
				})
			},

			// 触底
			onReach() {
				if (this.total > this.list.length) {
					this.page++;
					this.getList();
				}
			},

			begin(num) {
				// if (!this.to_uid) {
				// 	return this.$util.msg('请先选择抽中的礼物送给哪位主播才能抽奖');
				// }
				this.show = false;
				// 此处添加校验接口

				this.num = num;

				this.get_num = 0;
				this.select_opcity = false;
				this.setBtnStatus(0);
				this.shake_index = -1;
				this.show_gift = false;

				this.prizeList = this.resultArr(this.prizeList);

				setTimeout(() => {
					this.shuffle_card = true;
				}, 400);

				setTimeout(() => {
					this.shuffle_card = false;
				}, 2000);
				setTimeout(() => {
					this.setBtnStatus(2);
					this.flag = true;
				}, 3000);
			},

			open(click_index) {
				// click_index 点击下标
				// this.index 中奖下标
				if (this.show_gift) {
					return;
				}

				if (!this.flag) {
					return;
				}

				this.flag = false;

				// 此处添加抽奖接口
				this.$refs.loading.open();
				this.$post('/active.supGiftPrizeV2/setPrize', {
					num: this.num,
					rid: this.rid,
					to_uid: this.to_uid,
					gid: this.gid,
				}, true, (res) => {
					this.flag = true;
					this.$refs.loading.close();
					if (res.code == 5) {
						this.$native.toJinBiRecharge()
					}
				}).then(res => {
					this.$refs.loading.close();
					this.index = this.getWinningIndex(res.data.prize_list[0].id);

					var index_item = this.prizeList[this.index];
					var check_item = this.prizeList[click_index];

					this.$set(this.prizeList, this.index, check_item);
					this.$set(this.prizeList, click_index, index_item);

					this.get_num = 0;
					res.data.prize_list.forEach(element => {
						this.get_num += Number(element.num);
					});

					this.to_gift_name = res.data.prize_list[0].name;
					this.to_nickname = res.data.to_nickname;
					this.to_gift_leval = res.data.prize_list[0].level;

					this.select_opcity = true;
					this.shake_index = click_index;

					this.getBlance();
					this.success_list = res.data.prize_list;
					this.getAllPrice();

					setTimeout(() => {
						// if (res.data.prize_list.length > 1) {
						// 	this.show_get_list = res.data.prize_list;
						// 	this.show = true;
						// }
						this.$native.sendGiftSuccess(res.data.prize_list);
						this.show_gift = true;
					}, 500);
					setTimeout(() => {
						this.setBtnStatus(3);
						this.modal = true;
					}, 1000)
				});
			},

			getWinningIndex(id) {
				for (var i = 0; i < this.prizeList.length; i++) {
					if (this.prizeList[i].id == id) {
						return i;
					}
				}
				return -1;
			},

			setBtnStatus(status) {
				// 1 第一次  2 洗牌中  3 开奖后 展示三个按钮

				if (status == 0) {
					this.show_start_btn = false;
					this.show_first_btn = false;
					this.show_pending_btn = false;
				}

				if (status == 1) {
					this.show_start_btn = true;
					this.show_first_btn = false;
					this.show_pending_btn = false;
				}

				if (status == 2) {
					this.show_start_btn = false;
					this.show_first_btn = false;
					this.show_pending_btn = true;
				}

				if (status == 3) {
					this.show_start_btn = true;
					this.show_first_btn = false;
					this.show_pending_btn = false;
				}
			},

			getNotice() {
				this.$get('/active.supGiftPrizeV2/getPrizeLog', {
					page: 1,
					limit: 100
				}).then(res => {

					res.data.data.forEach(element => {
						// ，${element.consume_num}连拆 
						this.notice.push(`恭喜${element.nickname}用户开出${element.prize_name}礼物`);
					});

				});
			},

			getInitInfo() {
				this.$post('/active.supGiftPrizeV2/getInitInfo', {
					gid: this.gid
				}).then(res => {
					this.singGoldPrice = Number(res.data.singGoldPrice).toFixed(0);
					this.prizeList = res.data.prizeList;
					if (res.data.prizeList.length && res.data.prizeList[0].img) {
						this.load_image.push(res.data.prizeList[0].img)
					}
					this.preLoad();
				});
			},

			// 数组打乱
			resultArr(arr) {
				for (let i = arr.length - 1; i > 0; i--) {
					const j = Math.floor(Math.random() * (i + 1));
					[arr[i], arr[j]] = [arr[j], arr[i]];
				}
				return arr
			},

			preLoad() {
				for (let url of this.load_image) {
					let image = new Image();
					image.src = url;
					image.onload = () => {
						this.count++;
						// 加载完毕事件
						// 计算图片加载的百分数，绑定到percent变量
						let percentNum = Math.floor(this.count / this.load_image.length * 100);
						this.percent = percentNum;
					}
				}
			},

			// 选择赠送礼物目标
			onSelectPeople(id) {
				this.to_uid = id;
			},


			getCol() {
				if (this.success_list.length == 1) {
					return 1;
				} else if (this.success_list.length == 2) {
					return 2;
				} else {
					return 4;
				}
			},

			getAllPrice() {
				var price = 0;
				this.success_list.forEach(element => {
					var item_price = element.num * element.rmb_price
					price += item_price;
				});
				this.all_price = price * 10;
			},

			// 原生交互 获取直播间麦位成员信息
			getPeopleList(list) {
				var list = JSON.parse(list);
				list.forEach(element => {
					if (element.userId) {
						this.people_list.push(element);
					}
				})
			},

			onAgree() {
				if (!this.first_check) {
					return this.$util.msg('请先阅读并同意《玩法须知和公约》');
				}
				this.first_modal = false;
				var timestamp = Date.parse(new Date());
				this.$native.setTimestamp(timestamp);
			},

			getTimestamp(flag) {
				if (flag) {
					this.first_modal = true;
				}
			},

		},

		onLoad(option) {

			if (option.token) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('cid', option.cid);
				uni.setStorageSync('terminal', option.terminal);
			}

			this.rid = option.rid || 0;
			this.to_uid = option.to_uid || 0;
			this.gid = option.gid || 0;

			this.getNotice();
			this.getInitInfo();
			this.getBlance();

			window.getPeopleList = this.getPeopleList;
			this.$native.getPeopleList();

			// 模拟数据
			// for (var i = 0; i < 100; i++) {
			// 	this.people_list.push({
			// 		"avatarUrl": 'http://qiniu-cdn.maeiyun.com/storage/xy/picture/20250115/194348422c593f0002a315173a406831.jpg',
			// 		"userName": '主播昵称' + i,
			// 		"userId": 44 + i
			// 	})
			// }

			// window.getTimestamp = this.getTimestamp;
			// this.$native.getTimestamp();

		},
	}
</script>

<style lang="less" scoped>
	.loading {
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		padding-top: 20vh;
		background: #FFF;
	}

	.blind {
		min-height: 100vh;
		padding: 0 0 80rpx;
		background: url(https://qiniu-cdn.maeiyun.com//h5static/blind/blind_bg.png) 0 0 no-repeat;
		background-size: 100%;
	}

	.people_list {
		overflow: hidden;
		height: 122rpx;
		margin: 158rpx 0 0;
		width: 680rpx;

		.people_content {
			.item {
				width: 112rpx;
				flex-shrink: 0;

				.avatar {
					position: relative;
					width: 72rpx;
					height: 72rpx;

					.user_avatar {
						width: 72rpx;
						height: 72rpx;
						border-radius: 40rpx;
					}

					.select_image {
						width: 72rpx;
						height: 72rpx;
						position: absolute;
						z-index: 2;
						top: 0;
						left: 0;
					}

				}

				text {
					font-weight: 500;
					font-size: 24rpx;
					color: #BC60F0;
					line-height: 34rpx;
					width: 100%;
				}

				#select {
					color: #EE1EAF;
				}
			}
		}
	}

	.title {
		height: 50rpx;
		font-weight: 600;
		font-size: 36rpx;
		line-height: 50rpx;
		text-align: center;
		color: transparent;
		background-image: linear-gradient(100deg, #81AEFF 0%, #F4C5FF 50%, #9C7ADB 100%);
		background-clip: text;
	}

	.notice {
		width: 560rpx;
		border-radius: 24rpx;
		margin: 30rpx 0 60rpx;
		background: #FF51CA;

		/deep/ .u-notice-bar {
			padding: 6rpx 36rpx 6rpx 36rpx;
		}
	}

	.box {
		width: calc(100vw - 80rpx);
		position: relative;
		height: 400rpx;
		margin: 0 50rpx 0 30rpx;

		.item {
			width: 152rpx;
			height: 170rpx;
			transform-origin: center;
			position: absolute;
			transition: 0.3s;

			.block {
				width: 152rpx;
				height: 170rpx;
				background-size: 100% !important;
				transition: 0.3s;
				position: relative;
			}

			.image {
				width: 80rpx;
				height: 80rpx;
				position: absolute;
				top: 0rpx;
				left: 50%;
				margin-left: -40rpx;

				image {
					position: absolute;
					top: 0;
					left: 0;
					width: 80rpx;
					height: 80rpx;
					transition: 0.3s;
					transform-origin: center;
					opacity: 1;
				}
			}

			#opcity {
				opacity: 0;
			}

			.item_title {
				position: absolute;
				bottom: 0;
				width: 127rpx;
				height: 32rpx;
				background: #FF51CA;
				border-radius: 14rpx;
				opacity: 0.6;
				padding: 0 10rpx;
				margin-top: 8rpx;

				image {
					width: 25rpx;
					height: 25rpx;
				}

				text {
					flex: 1;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 30rpx;
					text-align: center;
				}
			}

		}

		.item1 {
			top: 0;
			left: 0;
			transition-delay: 0;
		}

		.item2 {
			top: 0;
			left: 170rpx;
			transition-delay: 0.1s;
		}

		.item3 {
			top: 0;
			left: 340rpx;
			transition-delay: 0.2s;
		}

		.item4 {
			top: 0;
			left: 510rpx;
			transition-delay: 0.3s;
		}

		.item5 {
			top: 200rpx;
			left: 0;
			transition-delay: 0.4s;
		}

		.item6 {
			top: 200rpx;
			left: 170rpx;
			transition-delay: 0.5s;
		}

		.item7 {
			top: 200rpx;
			left: 340rpx;
			transition-delay: 0.6s;
		}

		.item8 {
			top: 200rpx;
			left: 510rpx;
			transition-delay: 0.7s;
		}

		#begin {
			top: 115rpx;
			left: 275rpx;
		}

		.shake {
			transform: scale(1.2);
			animation: shake 0.8s !important;
			opacity: 1 !important;
			transition: 0s !important;
		}

	}

	.pending {
		margin-top: 20rpx;
		font-size: 36rpx;
		line-height: 50rpx;
		text-align: center;
		font-weight: bold;
		color: transparent;
		background-image: linear-gradient(15deg, #81AEFF 0%, #F4C5FF 55%, #9C7ADB 100%);
		background-clip: text;
	}

	.first {
		width: 710rpx;
		margin-top: 10rpx;

		view {
			background-size: 100% !important;
			width: 216rpx;
			height: 120rpx;
			padding-top: 40rpx;

			text {
				font-weight: 500;
				font-size: 28rpx;
				color: #FFE2D1;
				line-height: 40rpx;
			}
		}
	}

	.start {
		width: 710rpx;
		margin-top: 0;

		view {
			background-size: 100% !important;
			width: 216rpx;
			height: 120rpx;
			padding-top: 40rpx;

			text {
				font-weight: 500;
				font-size: 28rpx;
				color: #FFE2D1;
				line-height: 40rpx;
			}
		}
	}

	.send_text {
		width: 710rpx;
		margin-bottom: 10rpx;

		// opacity: .8;
		.text {
			text {
				font-weight: 600;
				font-size: 26rpx;
				color: #F8D0FF;
				line-height: 44rpx;
			}
		}

		text {
			margin-bottom: 8rpx;
			font-weight: 600;
			font-size: 28rpx;
			color: #F8D0FF;
			line-height: 44rpx;

			i {
				font-style: normal;
				font-weight: 600;
				font-size: 32rpx;
				color: #FFEA3E;
				line-height: 44rpx;
			}
		}
	}

	.gold_box {
		margin-top: 30rpx;
		width: 680rpx;

		.left {
			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 16rpx;
			}

			text {
				font-weight: 500;
				font-size: 28rpx;
				color: #781FAA;
				line-height: 40rpx;
			}
		}

		.right {
			width: 124rpx;
			height: 56rpx;

			image {
				width: 124rpx;
				height: 56rpx;
			}
		}
	}

	.open {
		width: 144rpx;
		height: 152rpx;
		margin-top: 180rpx;

		image {
			width: 144rpx;
			height: 152rpx;
		}
	}

	.rich {
		position: fixed;
		text-align: center;
		right: 0;
		top: 200rpx;
		width: 44rpx;

		image {
			width: 44rpx;
			height: 112rpx;
			margin-top: 12rpx;
		}
	}

	.popup {
		.popup_tab {
			width: 100vw;
			height: 200rpx;
			background-size: 100% !important;

			view {
				flex: 1;
				height: 200rpx;
			}
		}

		.popup_content {
			background: #FFF;
			position: relative;
			margin-top: -60rpx;
			z-index: 1;
			height: calc(85vh - 200rpx);
			width: 100vw;

			scroll-view {
				height: calc(85vh - 200rpx);
			}
		}

		.rich_text {
			padding: 32rpx 60rpx;

			.text {
				font-size: 26rpx;
				color: #FF3E90;
				line-height: 36rpx;
			}

			.table {
				width: 600rpx;
				background: #FF60C6;
				border-radius: 16rpx;
				border: 2rpx solid #FF95D9;
				overflow: hidden;
				margin-top: 18rpx;

				.header {
					.item {
						flex: 1;
						overflow: hidden;
						height: 72rpx;
						border-right: 2rpx solid #FF95D9;
						border-bottom: 2rpx solid #FF95D9;

						text {
							font-size: 26rpx;
							color: #FFF;
							line-height: 36rpx;
						}
					}
				}

				.table_list {
					.item {
						flex: 1;
						overflow: hidden;
						height: 72rpx;
						background: #FFFFFF;
						border-right: 2rpx solid #FF95D9;
						border-bottom: 2rpx solid #FF95D9;

						image {
							width: 44rpx;
							height: 44rpx;
							margin: 0 12rpx 0 16rpx;
						}

						text {
							font-weight: 500;
							font-size: 24rpx;
							color: #781FAA;
							line-height: 32rpx;
						}
					}
				}

				#no_right {
					border-right: 0;
				}

				#no_bottom {
					border-bottom: 0;
				}
			}
		}

		.popup_list {
			margin: 32rpx 32rpx;

			.item {
				overflow: hidden;
				padding: 50rpx 24rpx;
				border-bottom: 2rpx solid #FD6AC7;

				.left {
					flex: 1;
					overflow: hidden;

					.avatar {
						margin-right: 24rpx;

						image {
							width: 96rpx;
							height: 96rpx;
							border-radius: 50%;
							border: 6rpx solid #FD6AC7;
						}
					}

					.text {
						flex: 1;
						overflow: hidden;

						.name {
							font-weight: 500;
							font-size: 30rpx;
							color: #FF3E90;
							line-height: 32rpx;
						}

						.info {
							margin: 4rpx 0;

							text {
								font-size: 26rpx;
								color: #FF3E90;
								line-height: 32rpx;
							}

							i {
								font-size: 26rpx;
								color: #FFB250;
								line-height: 32rpx;
								font-style: normal;
							}
						}

						.time {
							font-size: 24rpx;
							color: rgba(255, 62, 144, 0.6);
							line-height: 34rpx;
						}
					}
				}

				.right {
					width: 96rpx;
					height: 96rpx;
					margin-left: 20rpx;

					image {
						width: 96rpx;
						height: 96rpx;
					}
				}
			}
		}

	}

	.success {
		width: 100vw;

		.grid {
			width: 100vw;
			height: 608rpx;
			background: url(https://qiniu-cdn.maeiyun.com//h5static/blind/blind_success_box_bg.png) 0 0 no-repeat;
			background-size: 100%;
			padding: 144rpx 50rpx 0;

			.item {
				margin-bottom: 24rpx;
				width: 136rpx;
				height: 128rpx;
				border-radius: 24rpx;
				overflow: hidden;
				position: relative;

				.price {

					position: absolute;
					right: 4rpx;
					bottom: 4rpx;
					z-index: 2;

					text {
						font-weight: 900;
						font-size: 32rpx;
						color: #C00086;
						line-height: 34rpx;
						-webkit-text-stroke: 2rpx #FFFFFF;
						text-stroke: 1rpx #FFFFFF;
					}
				}

				image {
					width: 128rpx;
					height: 128rpx;
				}

			}

			#one {
				width: 240rpx;
				height: 240rpx;

				image {
					width: 100%;
				}
			}

		}

		.all_price {
			margin: 0 0 24rpx;

			text {
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 40rpx;
			}

			image {
				width: 32rpx;
				height: 32rpx;
				margin-left: 12rpx;
			}
		}

		.success_again {
			width: 216rpx;
			height: 120rpx;

			view {
				background-size: 100% !important;
				width: 216rpx;
				height: 120rpx;
				padding-top: 40rpx;

				text {
					font-weight: 500;
					font-size: 28rpx;
					color: #FFE2D1;
					line-height: 40rpx;
				}
			}
		}

		.close_text {
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 34rpx;
			margin-top: 24rpx;
		}

	}

	.first_popup {
		width: 600rpx;
		height: 60vh;
		background: linear-gradient(157deg, #E6FCF6 0%, rgba(255, 255, 255, 0.5) 100%), linear-gradient(192deg, #FFDEFF 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF;
		box-shadow: inset 0rpx 2rpx 0rpx 2rpx #FFFFFF;
		border-radius: 40rpx;
		padding: 48rpx 40rpx;
		overflow: hidden;

		.first_title {
			font-family: 'gongfu';
			color: #FF3E90;
		}

		.first_content {
			flex: 1;
			overflow: hidden;
			margin: 40rpx 0 30rpx;

			scroll-view {
				height: 100%;

				view {
					font-size: 26rpx;
					color: #FF3E90;
					line-height: 36rpx;
				}
			}
		}

		.first_check {
			.icon {
				margin-right: 8rpx;
			}

			.first_text {
				text {
					font-size: 26rpx;
					color: #FF3E90;
					line-height: 36rpx;
				}

				i {
					font-size: 26rpx;
					color: #FF7900;
					line-height: 36rpx;
					font-style: normal;
				}
			}

		}

		.first_btn {
			margin-top: 40rpx;
			width: 500rpx;

			.first_btn_item {
				width: 240rpx;
				height: 89rpx;
				background-size: 100% !important;

				text {
					font-family: gongfu;
					font-size: 36rpx;
					color: #FFFFFF;
					line-height: 44rpx;
				}

				i {
					font-size: 20rpx;
					color: #DB0EBC;
					line-height: 30rpx;
					font-style: normal;
				}
			}
		}

	}

	@keyframes shake {

		0% {
			transform: translateX(0);
		}

		50% {
			transform: translateX(0);
		}

		5% {
			transform: translateX(-9px)
		}

		10% {
			transform: translateX(8px)
		}

		15% {
			transform: translateX(-7px)
		}

		20% {
			transform: translateX(6px)
		}

		25% {
			transform: translateX(-5px)
		}

		30% {
			transform: translateX(4px)
		}

		35% {
			transform: translateX(-3px)
		}

		40% {
			transform: translateX(2px)
		}

		45% {
			transform: translateX(-1px)
		}

		100% {
			transform: scale(1.2);
		}
	}
</style>